<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
<script src="js/util.js"></script>
<style type="text/css">
html,body{margin:0px; overflow:hidden; height:100%;}
</style>
<script type="text/javascript">
var alert_dom;
$(document).ready(
	function()
	{
		alert_dom = $('#myalert')
		$("#host").focus().select();
		$('#login_btn').click(function(){
			var host = $('#host').val();
			py.jsSetCfg('zkhost', host);
			var auth_list = new Array()
			var dom_auth_list = $('[name=auth_one_line]');
			for(var i=0; i < dom_auth_list.length; ++i)
			{
				var user = dom_auth_list.eq(i).find('[name=auth_user]').val();
				var pass = dom_auth_list.eq(i).find('[name=auth_pass]').val();
				if(empty(user) && empty(pass))
					continue;
				if(empty(user)!=empty(pass))
					myalert('user or password can not be empty, index='+i);
				auth_list.push({'user':user,'pass':pass});
			}
			auth_list_str = JSON.stringify(auth_list);
			py.jsSetCfg('zkauthlist', auth_list_str);
			var obj = py.jsZkConnect(host,auth_list_str)
			if(!empty(obj))
			{
				myalert("connect() failed: err="+obj)
				return;
			}
			obj = py.jsZkGetChildren('/')
			if(empty(obj.err))
			{
				pyEnsureHistoryHost(host);
				setTimeout(function(){window.location.href="main.html";},100);
			}
			else
			{
				myalert("get_children() failed, err="+obj.err)
			}
		});
		//last host
		var ohost = py.jsGetCfg('zkhost');
		if(!empty(ohost))
			$("#host").val(ohost);
		//history host list
		var hlist = pyGetHistoryHost();
		for(var i=0; i<hlist.length; ++i)
		{
			var p = $('#history_sample').parent();
			var d = $('#history_sample').clone().removeAttr('id').show();
			d.find('[name=text]').text(hlist[i]);
			p.append(d);
		}
		//last auth list
		var oauth_list = py.jsGetCfg('zkauthlist')
		if(!empty(oauth_list))
		{
			oauth_list = JSON.parse(oauth_list);
			var dfirst = $('[name=auth_one_line]:first');
			for(var i=0; i < oauth_list.length; ++i)
			{
				var d;
				if(i==0)
					d = dfirst;
				else
				{
					d = dfirst.clone();
					dfirst.parent().append(d);
				}
				d.find('[name=auth_user]').val( oauth_list[i].user )
				d.find('[name=auth_pass]').val( oauth_list[i].pass )
			}
		}
	}
);
function addAuth(obj)
{
	var d=$('[name=auth_one_line]:first');
	var p = d.parent();
	p.append(d.clone());
}
function delAuth(obj)
{
	var d = $(obj).parents('[name=auth_one_line]');
	if($('[name=auth_one_line]').size()>1)
		d.remove();
	else
	{
		d.find('[name=auth_user]').val('');
		d.find('[name=auth_pass]').val('');
	}
}
function myalert(t)
{
	alert_dom.text(t).show(500);
}
function selectHistory(o)
{
	$('#host').val( $(o).text() );
}
function delHistory(o)
{
	var p = $(o).parents('[name=history]');
	var h = p.find('[name=text]').text();
	pyEraseHistoryHost(h);
	p.remove();
}
function pyGetHistoryHost()
{
	var hlist = null;
	try{
		hlist = JSON.parse(py.jsGetCfg('zkhistoryhost'))
		if(hlist.length>0)
			return hlist;
		return [];
	}catch(e){log(e);}
	return [];
}
function pySetHistoryHost(list)
{
	var s = JSON.stringify(list);
	py.jsSetCfg('zkhistoryhost',s);
}
function pyEnsureHistoryHost(host)
{
	var hlist = pyGetHistoryHost();
	for(var i=0; i<hlist.length; ++i)
	{
		if(hlist[i]==host)
			return;
	}
	hlist.push(host);
	pySetHistoryHost(hlist);
}
function pyEraseHistoryHost(host)
{
	log('erasing '+host);
	var hlist = pyGetHistoryHost();
	for(var i=0; i<hlist.length; ++i)
	{
		if(hlist[i]==host)
		{
			hlist.splice(i,1);
			pySetHistoryHost(hlist);
			return;
		}
	}
}
</script>
</head>
<body>
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-3"></div>
		<div class="col-sm-6">
			<form role="form">
				<div class="form-group">
					<label for="host">Host</label>
					<div class="input-group">
						<div class="input-group-btn">
							<button class="btn btn-primary dropdown-toggle form-control" data-toggle="dropdown"><span class="caret"></span></button>
							<ul class="dropdown-menu">
								<li style="display:none" id="history_sample" name="history">
									<span style="margin:0.5em">
									<span onClick="selectHistory(this)" name="text" style="cursor:pointer"></span>
									&nbsp;&nbsp;
									<span onClick="delHistory(this)" class="glyphicon glyphicon-remove" style="cursor:pointer" aria-hidden="true"></span>
									</span>
								</li>
							</ul>
						</div>
						<input type="text" class="form-control" id="host" placeholder="e.g. 127.0.0.1:2181,192.168.0.15:2181"/>
					</div>
				</div>
				<div class="form-group">
					<label for="host">Digest Scheme List (keep empty if not use)</label>
					<div class="input-group" name="auth_one_line">
						<span class="input-group-addon">user:</span>
						<input type="text" class="form-control" placeholder="user name" name="auth_user"/>
						<span class="input-group-addon">pass:</span>
						<input type="password" class="form-control" placeholder="original plain password" name="auth_pass"/>
						<span class="input-group-btn">
							<button type="button" class="btn btn-success" name="auth_add_btn" title="add new authentication credential" onClick="addAuth(this)"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
							<button type="button" class="btn btn-warning" name="auth_del_btn" title="remove this authentication credential" onClick="delAuth(this)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
						</span>
					</div>
				</div>
				<div class="form-group">
					<button type="button" class="btn btn-primary form-control" id="login_btn">Login</button>
				</div>
				<div>
					<div class="alert alert-warning" role="alert" id="myalert" style="display:none"></div>
				</div>
			</form>
		</div>
		<div class="col-sm-3"></div>
	</div>
</div>
</body>
</html>
